<template>
	<div class="special-free">
		<van-skeleton class="tab-skeleton" row="6" :loading="isTabLoading">
			<van-tabs
				v-model="active"
				background="#FFFFFF"
				title-active-color="#F70114"
				title-inactive-color="#171717"
				color="#F70114"
				sticky
				animated
				swipeable
				@click="tabChange"
				@change="tabChange"
			>
				<van-tab v-for="(item, index) in list" :title="item.title" :key="index">
					<!-- <template #title>
						<div class="time-title">
							<div>15:00</div>
							<div>{{ item.title }}</div>
						</div>
					</template> -->
					<van-pull-refresh v-model="isRefresh" @refresh="onRefresh(item, index)">
						<van-list
							v-model="item.loading"
							:finished="item.finished"
							:error.sync="item.error"
							@load="loadMore(item, '', index)"
							finished-text="没有更多了"
							loading-text="拼命加载中"
						>
							<!--渲染商品列表-->
							<div class="goods-list" v-if="item.goodsList.length > 0">
								<div class="goods-wrap" v-for="(goodsItem, goodsIndex) in item.goodsList" :key="'goods' + goodsIndex">
									<goods-item @over="over" :item="goodsItem"></goods-item>
								</div>
							</div>

							<!--骨架屏-->
							<van-skeleton
								v-for="number in 3"
								:key="'number' + number"
								avatar
								avatar-size="144"
								avatar-shape="square"
								row="4"
								:row-width="['100%', '90%', '30%', '75%']"
								:loading="item.loading"
							></van-skeleton>

							<div slot="error">
								<empty emptyText="暂无商品" offsetTop="150"></empty>
							</div>
						</van-list>
					</van-pull-refresh>
				</van-tab>
			</van-tabs>
		</van-skeleton>

		<!--骨架屏-->
		<div class="skeleton-wrap" v-if="isTabLoading">
			<van-skeleton
				v-for="number in 3"
				:key="'number' + number"
				avatar
				avatar-size="144"
				avatar-shape="square"
				row="4"
				:row-width="['100%', '90%', '30%', '75%']"
				:loading="isTabLoading"
			></van-skeleton>
		</div>
		<!--  抢购列表 回到首页-->
		<div class="panic-buying">
			<svg-icon @click="$router.push('/')" class="icon" iconName="shouye"></svg-icon>
		</div>

		<van-popup class="rule-popup" v-model="msgVisible" closeable>
			<div class="main">
				<h2>提示</h2>
				<div class="rule">
					{{ msg }}
				</div>
				<div @click="msgVisible = false" class="ok-btn">我知道啦</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import { Tab, Tabs, PullRefresh, List, Skeleton, Popup } from 'vant';
import { Empty } from '@/components';
import GoodsItem from '../components/list-flash-sale-gitem';
import moment from 'moment';
export default {
	name: 'flash-sale-my',
	components: {
		'van-tab': Tab,
		'van-tabs': Tabs,
		'van-pull-refresh': PullRefresh,
		'van-list': List,
		'van-skeleton': Skeleton,
		'van-popup': Popup,
		GoodsItem,
		Empty
	},
	data() {
		return {
			isTabLoading: true,
			msgVisible: false,
			msg: '',
			isRefresh: false, // 控制是否刷新
			active: 0,
			list: [
				{
					title: '全部',
					loading: false,
					finished: false,
					error: false,
					goodsList: [],
					page: 1
				},
				{
					title: '已抢购',
					loading: false,
					finished: false,
					error: false,
					goodsList: [],
					page: 1
				},
				{
					title: '已过期',
					loading: false,
					finished: false,
					error: false,
					goodsList: [],
					page: 1
				}
			],
			params: {
				page: 1,
				size: 20,
				app: 'yzf',
				order: 'ysqLevel',
				sort: 'desc'
			}
		};
	},
	created() {
		this.isTabLoading = false;
	},
	methods: {
		over() {
			this.msg = '亲亲，商品抢购结束咯，看看其他好物吧！';
			this.msgVisible = true;
		},
		// 异步加载数据
		loadMore(item, operate, index) {
			if (Number(item.cid) === 0) {
				this.params.cid = '';
				this.params.order = 'ysqLevel';
				this.params.sort = 'desc';
			} else {
				this.params.cid = item.cid;
				this.params.order = '';
				this.params.sort = '';
			}
			if (index === 1) {
				this.params.startTime = moment().format('YYYY-MM-DD ' + '00:00');
				this.params.endTime = moment().format('YYYY-MM-DD ' + '24:00');
			} else if (index === 2) {
				delete this.params.startTime;
				this.params.endTime = moment().format('YYYY-MM-DD ' + '00:00');
			} else {
				delete this.params.startTime;
				delete this.params.endTime;
			}

			this.params.page = item.page;
			this.$service.shopping.goods.myFlashList(this.params).then(res => {
				item.goodsList = item.goodsList.concat(res.list);

				// 加载状态结束
				item.loading = false;
				item.page += 1;

				// 刷新列表
				if (operate === 'refresh') {
					this.$toast('刷新成功');
					this.isRefresh = false;
				}

				// 暂无数据
				if (item.goodsList.length === 0) {
					item.page = 1;
					item.error = true;
				} else if (item.goodsList.length >= res.pagination.total) {
					// 数据全部加载完成
					item.finished = true;
				}
			});
		},
		// 下拉刷新
		onRefresh(item, index) {
			item.error = false;
			item.goodsList = [];
			item.loading = true;
			item.finished = false;
			item.page = 1;
			this.loadMore(item, 'refresh', index);
		},
		// tab切换还原page
		tabChange() {
			document.getElementById('container').scrollTop = 0;
		}
	}
};
</script>

<style lang="scss" scoped>
.special-free {
	// background: #f6f7fa url('../../../assets/images/index/special/free-background.png') no-repeat 0 82px;
	background-size: 100%;
	padding-bottom: 30px;
	.tab-skeleton {
		background: $color-white;
		padding: 10px;
		.van-skeleton__content {
			display: flex;
			justify-content: space-between;
			.van-skeleton__row {
				margin-top: 0;
				height: 60px;
				border-radius: 8px;
				width: 15% !important;
			}
		}
	}
	/deep/ .van-tabs {
		.van-sticky {
			top: -2px !important;
		}
		.van-tabs__content {
			// background: $color-white;
			width: 734px;
			min-height: 950px;
			margin: 0px auto 0;
			// border-radius: 32px;
			// box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
			.van-list {
				// padding: 24px;
				padding-top: 20px;
				min-height: 850px;
				.goods-list {
					margin-bottom: 30px;
					.goods-wrap {
						&:not(:first-child) {
							padding-top: 20px;
							// margin-top: 28px;
							// border-top: 2px dotted #e2e2e2;
						}
					}
				}
				.van-skeleton {
					border-bottom: 2px dotted #f2f3f5;
					margin-bottom: 30px;
					padding: 0 0 30px 0;
					.van-skeleton__avatar {
						width: 36% !important;
						height: 0 !important;
						border-radius: 8px;
						padding-bottom: 36%;
					}
					.van-skeleton__content {
						padding: 0;
						@include flexBox(space-between, null, column);
					}
				}
			}
		}
	}

	.skeleton-wrap {
		width: 700px;
		min-height: 950px;
		margin: 15px auto 0;
		border-radius: 32px;
		background: $color-white;
		padding: 24px;
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
		.van-skeleton {
			border-bottom: 2px dotted #f2f3f5;
			margin-bottom: 30px;
			padding: 0 0 30px 0;
			.van-skeleton__avatar {
				width: 36% !important;
				height: 0 !important;
				border-radius: 8px;
				padding-bottom: 36%;
			}
			.van-skeleton__content {
				padding: 0;
				@include flexBox(space-between, null, column);
			}
		}
	}
}

// new css
.time-title {
	line-height: 1;
	padding-top: 15px;
}
.panic-buying {
	position: fixed;
	right: 40px;
	bottom: 280px;
	@include flexBox(center, center, wrap);
	flex-direction: column;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 1);
	border: 2px solid rgba(235, 234, 231, 1);
	box-shadow: 0px 2px 6px rgba(247, 1, 20, 0.1);
	border-radius: 50%;
	.icon {
		font-size: 40px;
	}
}

.rule-popup {
	width: 600px;
	border-radius: 16px;
	padding: 50px 40px;
	.main {
		h2 {
			font-size: 32px;
			text-align: center;
			margin-bottom: 50px;
			color: #383434;
		}
		.rule {
			max-height: 600px;
			overflow: auto;
			font-size: 26px;
			color: #616161;
			margin-bottom: 10px;
		}
	}
}

.ok-btn {
	width: 240px;
	height: 68px;
	line-height: 68px;
	text-align: center;
	margin: 0 auto;
	margin-top: 54px;
	background: rgba(247, 1, 20, 1);
	border-radius: 48px;
	font-size: 28px;
	color: #ffffff;
	cursor: pointer;
}
</style>
